<template>

  <mu-container class="profilePaper">
    <mu-row>
      <mu-appbar class="profileAppBar" color="primary">
        <mu-icon value="contacts" slot="left"></mu-icon>
        充值
      </mu-appbar>
    </mu-row>
    <mu-row>
      <mu-col span="12">
        <mu-card class="ProfileCard" raised>
          <mu-card-header :title="'用户名： ' + validateForm.username" :sub-title="'用户ID号:  ' + validateForm.userId">
            <mu-avatar slot="avatar">
              <mu-icon value="person"></mu-icon>
            </mu-avatar>
          </mu-card-header>
          <mu-card-text>
            <mu-card-actions>
              <mu-form ref="form" :model="from" label-position="left" label-width="100" class="mu-demo-form">
                <mu-card-text>
                  <mu-form-item label="金额" prop="money" :rules="rules.money">
                    <mu-text-field v-model="from.money" prop="money"></mu-text-field>
                  </mu-form-item>
                </mu-card-text>
                <mu-form-item>
                  <mu-button color="secondary" @click="submit">充值</mu-button>
                  <mu-button @click="navigateTo('/myPayInfo')">返回</mu-button>
                </mu-form-item>
              </mu-form>
              <mu-dialog title="正在充值" width="360" :open.sync="openPass" :loading="payLoading">
                <p>充值数额：￥ {{ from.money }}</p>
                <mu-text-field label="Password" v-model="from.password" label-float error-text="请输入支付密码" type="password"
                               icon="fingerprint"></mu-text-field>
                <br/>
                <mu-button slot="actions" flat color="error" @click="openPass = false">取消</mu-button>
                <mu-button slot="actions" flat color="primary" @click="pay()">确认付款</mu-button>
              </mu-dialog>
              <mu-list>
                    <span v-for="(data,index) in vipLevelList" :key="index">
                      <mu-list-item>
                      <mu-list-item-action><mu-icon value="person_pin"></mu-icon></mu-list-item-action>
                      <mu-list-item-title>vip等级： {{ data.viplevel }}</mu-list-item-title>
                        <mu-list-item-action><mu-icon value="fingerprint"></mu-icon></mu-list-item-action>
                      <mu-list-item-title>vip等级折扣： {{ data.discount }}</mu-list-item-title>
                        <mu-list-item-action><mu-icon value="fingerprint"></mu-icon></mu-list-item-action>
                      <mu-list-item-title>充值金额： {{ data.tomoney }}</mu-list-item-title>
                    </mu-list-item>
                    </span>
              </mu-list>
            </mu-card-actions>
          </mu-card-text>
        </mu-card>
      </mu-col>
    </mu-row>
  </mu-container>

</template>

<script>

import Cookie from 'js-cookie'
import {getUserInfo, updatePayPassword} from "@/api/user";
import {findAll, sendPay} from "@/api/userVipLevel";

export default {
  name: "MyPay",
  data() {
    return {
      validateForm: {
        id: Cookie.get("user_id"),
        username: ''
      },
      from: {
        money: '',
        password: '',
      },
      vipLevelList: [],
      openPass: false,
      payLoading: false,
      rules: {
        money: [
          {validate: (val) => !!val, message: '请输入您的充值金额', trigger: 'blur'},
          {validate: (val) => val <= 1000, message: '最大1000￥', trigger: 'blur'},
        ],
      },
      userId: null,
      btnLoading: false
    }
  },
  created() {
    this.fetchData();
    findAll().then((res) => {
      this.vipLevelList = res.data
    })
  },
  methods: {
    fetchData() {
      getUserInfo().then(res => {
        this.validateForm = res.data;
      }).catch(err => {
        this.$toast.error(err)
      })
    },
    submit() {
      this.$refs.form.validate().then((result) => {
        console.log(result)
        if (result == false) {
          this.$toast.warning("请输入必填项！")
          return
        } else {
          this.openPass = true
        }
      });
    },
    navigateTo(val) {
      this.$router.push(val);
    },
    pay() {
      this.payLoading = true
      sendPay(this.from).then(res => {
        if (res.code === 1000) {
          this.$toast.message(res.message)
          this.navigateTo('/myPayInfo')
        } else {
          this.$toast.message(res.message)
        }
        this.payLoading = false
        this.openPass = false
      }).catch(err => {
        this.$toast.message("修改失败：" + err.toString())
      })
    },
  }
}
</script>

<style scoped>
.login-container {
  width: 100%;
  background-image: linear-gradient(270deg, #8146b4, #6990f6);
  padding: 8px;
}

.mu-demo-form {
  width: 100%;
  /*max-width: 460px;*/
}

.login-card {
  width: 100%;
  max-width: 80%;
  margin: 50px auto;
}

.profileAppBar {
  height: 40px;
  width: auto !important;
  border-radius: 35px;
  margin: 10px;
  color: #fff;
  padding: 10px;
}

.profilePaper {
  padding: 10px;
}

.ProfileCard {
  width: 100%;
  margin: 0 auto;
}
</style>
